import { ChangeDetectionStrategy, Component, DebugElement, ChangeDetectorRef } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { BadgeModule } from './badge.module';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  template: `
    <span
      [lv-badge]="lvValue"
      [lvBadgeMaxValue]="lvMaxValue"
      [lvBadgeVisible]="lvVisible"
      [lvBadgeDot]="lvDot"
      [lvBadgeShowZero]="lvShowZero"
      [lvBadgeTextColor]="lvTextColor"
      [lvBadgeBackgroundColor]="lvBackgroundColor"
    ></span>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestBadgeBasicComponent {
  lvValue = 0;
  lvMaxValue = 999;
  lvVisible = true;
  lvDot = false;
  lvShowZero = false;
  lvTextColor: string = '';
  lvBackgroundColor: string = '';
}

describe('BadgeDirective', () => {
  const circleClassBy = By.css('.lv-badge-circle');
  const dotClassBy = By.css('.lv-badge-dot');

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [BadgeModule, NoopAnimationsModule],
      declarations: [TestBadgeBasicComponent],
    }).compileComponents();
  }));

  describe('basic', () => {
    let component: TestBadgeBasicComponent;
    let fixture: ComponentFixture<TestBadgeBasicComponent>;
    let debugEle: DebugElement;
    let cdr: ChangeDetectorRef;

    beforeEach(() => {
      fixture = TestBed.createComponent(TestBadgeBasicComponent);
      component = fixture.componentInstance;
      component.lvValue = 10;
      debugEle = fixture.debugElement;
      cdr = fixture.debugElement.injector.get(ChangeDetectorRef);
      fixture.detectChanges();
    });

    it('should visible or hidden', fakeAsync(() => {
      expect(debugEle.query(circleClassBy)).toBeTruthy();

      component.lvVisible = false;
      cdr.detectChanges();
      tick(500);
      expect(debugEle.query(circleClassBy)).toBeNull();
    }));

    it('should dot', () => {
      expect(debugEle.query(dotClassBy)).toBeNull();

      component.lvDot = true;
      cdr.detectChanges();
      expect(debugEle.query(dotClassBy)).toBeTruthy();
    });

    it('should show zero', fakeAsync(() => {
      component.lvValue = 0;
      component.lvShowZero = false;
      cdr.detectChanges();
      tick(500);
      expect(debugEle.query(circleClassBy)).toBeNull();

      component.lvShowZero = true;
      cdr.detectChanges();
      expect(debugEle.query(circleClassBy)).toBeTruthy();

      component.lvShowZero = false;
      component.lvValue = 10;
      cdr.detectChanges();
      tick(500);
      expect(debugEle.query(circleClassBy)).toBeTruthy();
    }));

    it('should backgroundColor', () => {
      const backgroundColor = 'blue';
      component.lvBackgroundColor = backgroundColor;
      cdr.detectChanges();
      expect(debugEle.query(circleClassBy).styles?.background).toBe(backgroundColor);
    });

    it('should color', () => {
      const color = 'blue';
      component.lvTextColor = color;
      cdr.detectChanges();
      expect(debugEle.query(circleClassBy).styles?.color).toBe(color);
    });
  });
});
